<template>
	<el-dialog title="导出表格" class="derive-dialog" v-el-drag-dialog :visible.sync="dialogVisible" width="45%" top="10vh">
		<div class="derive-box" v-if="formWidget">
			<div class="derive-box_p1">
				<el-form class="derive_el-form">
					<el-form-item v-for="(form,formIndex) in formWidget.advancedForms" :key="formIndex" :label="form.label">
						<el-input size="medium" v-model="paraObj[form.prop]" :placeholder="'请输入'+form.label" v-if="form.type==='TextBox'||form.type==='TextArea'"></el-input>
						<x-user-tree v-model="paraObj['UserIdJson']" count="40" :isJson="true" placeholder="请选择会员" v-if="form.type==='UserTree'"></x-user-tree>
						<el-switch v-model="paraObj[form.prop]" :placeholder="'请输入'+form.label" v-if="form.type==='Switch'"></el-switch>
						<x-select size="medium" v-model="paraObj[form.prop]" :noChoice="true" v-if="form.type==='DropdownList'||form.type==='RadioButton'" :type="form.parameter" :apiUrl="form.apiUrl" ref="XSelect"></x-select>
						<div v-if="form.type==='NumberRang'" class="number-rang">
							<el-input-number size="medium" v-model="paraObj[form.prop+'_Start']" :placeholder="'请输入起始'+form.label"></el-input-number>
							<div class="center-icon">
								<i class="el-icon-minus"></i>
							</div>
							<el-input-number size="medium" v-model="paraObj[form.prop+'_End']" :placeholder="'请输入截止'+form.label"></el-input-number>
						</div>
						<div v-if="form.type === 'ForeignKey'">
							<x-data-select ref="x_data_select" :widget="form" v-model="paraObj[form.prop]" :type="form.parameter"></x-data-select>
						</div>
						<div v-if="form.type==='DatePicker'">
							<div class="block">
								<el-date-picker size="medium" v-model="dataPicke" :picker-options="pickerOptions" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['12:00:00']" @change="timeChange(form.prop)">
								</el-date-picker>
							</div>
						</div>
					</el-form-item>
					<el-form-item label="总记录数">
						<div class="derive-text">
							<x-code>{{paraObj.pageShow}}</x-code>
						</div>
						<div class="derive-intro">总记录数</div>
					</el-form-item>
					<el-form-item label="每页导出数">
						<el-input-number size="medium" @change="numberChang" v-model="paraObj.pageSize" label="每页导出数" :max="10000"></el-input-number>
						<div class="derive-intro">每次最多导入10000条，超过请分页导出</div>
					</el-form-item>
					<el-form-item label="导出页数">
						<el-input-number size="medium" v-model="paraObj.pageIndex" label="导出页数" :max="maxPagesIndex"></el-input-number>
						<div class="derive-intro">数字的最大值，不能超过{{maxPagesIndex}}</div>
					</el-form-item>
					<el-form-item label="下载地址" v-if="downloadUrl">
						<div class="derive-url" @click="downloadTab(downloadUrl.url)">{{downloadUrl.name}}</div>
						<div class="derive-intro">点击可下载</div>
					</el-form-item>
				</el-form>
			</div>
			<div class="derive-box_p2">
				<el-checkbox class="p2-check1" :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">导出项<span>{{checLength}}/{{checkList.length}}</span></el-checkbox>
				<el-checkbox-group class="p2-check2" v-model="checkedCities" @change="handleCheckedCitiesChange">
					<el-checkbox v-for="(city,index) in checkList" :label="city" :key="index">{{city.label}}</el-checkbox>
				</el-checkbox-group>
			</div>
		</div>
		<span slot="footer" class="dialog-footer">
			<el-button @click="dialogVisible = false">取 消</el-button>
			<el-button type="primary" @click="submit" :loading="isLoading">确认</el-button>
		</span>
	</el-dialog>
</template>
<script>
	import elDragDialog from '@/service/directives/el-dragDialog'
	import ala from 'ala'
	export default {
		directives: {
			elDragDialog
		},
		data() {
			return {
				typeString: null,
				dialogVisible: false,
				paraObj: {
					pageSize: 100,
					pageIndex: 1,
					pageShow: 0,
					type: ''
				},
				downloadUrl: null,
				maxPagesIndex: 1,
				isLoading: false,
				formWidget: null,
				dataPicke: [],
				pickerOptions: {
					shortcuts: [{
						text: '最近一周',
						onClick(picker) {
							const end = new Date()
							const start = new Date()
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
							picker.$emit('pick', [start, end])
						}
					}, {
						text: '最近一个月',
						onClick(picker) {
							const end = new Date()
							const start = new Date()
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
							picker.$emit('pick', [start, end])
						}
					}, {
						text: '最近三个月',
						onClick(picker) {
							const end = new Date()
							const start = new Date()
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
							picker.$emit('pick', [start, end])
						}
					}, {
						text: '最近半年',
						onClick(picker) {
							const end = new Date()
							const start = new Date()
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 180)
							picker.$emit('pick', [start, end])
						}
					}, {
						text: '最近一年',
						onClick(picker) {
							const end = new Date()
							const start = new Date()
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 360)
							picker.$emit('pick', [start, end])
						}
					}]
				},
				checkList: [],
				checkAll: false,
				checkedCities: [],
				isIndeterminate: false,
				checLength: 0
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			async init(searchOptions) {
				if (searchOptions !== undefined) {
					this.formWidget = searchOptions
				}
			},
			handleCheckAllChange(val) {
				this.checkedCities = val ? this.checkList : []
				this.checLength = this.checkedCities.length
				this.isIndeterminate = false
				// this.wipeForm(this.checkedCities)
			},
			handleCheckedCitiesChange(value) {
				this.checLength = value.length
				let checkedCount = value.length
				this.checkAll = checkedCount === this.checkList.length
				this.isIndeterminate = checkedCount > 0 && checkedCount < this.checkList.length
				// this.wipeForm(this.checkedCities)
			},
			timeChange(prop) {
				this.paraObj[prop + '_Start'] = this.dataPicke[0]
				this.paraObj[prop + '_End'] = this.dataPicke[1]
			},
			popupChang(type, widgetData, data) {
				this.typeString = type
				if (!this.typeString) {
					this.typeString = ala.getType(this.$route, this.widgetData)
				}
				this.paraObj.type = this.typeString
				this.paraObj.pageShow = data.result.recordCount
				this.maxPagesIndex = Math.ceil(this.paraObj.pageShow / this.paraObj.pageSize)
				this.checkList = data.columns
				this.handleCheckAllChange(true)
				this.handleCheckedCitiesChange(this.checkList)
				this.dialogVisible = true
			},
			numberChang(val1, val2) {
				this.maxPagesIndex = Math.ceil(this.paraObj.pageShow / val1)
			},
			wipeForm(val1) {
				var arr = this.checkList.filter(item => {
					var arr1 = val1.map(v => v.prop)
					return arr1.includes(item.prop)
				})
				var arr2 = this.checkList.filter(item => {
					var arr1 = val1.map(v => v.prop)
					return !arr1.includes(item.prop)
				})
				this.formWidget.advancedForms = arr
				var this_ = this
				arr2.forEach((v) => {
					if (v.type === 'NumberRang') {
						this_.paraObj[v.prop + '_Start'] = ''
						this_.paraObj[v.prop + '_End'] = ''
					} else if (v.type === 'DatePicker') {
						this_.paraObj[v.prop + '_Start'] = ''
						this_.paraObj[v.prop + '_End'] = ''
					} else {
						this_.paraObj[v.prop] = ''
					}
				})
				return arr
			},
			async submit() {
				this.isLoading = true
				for (var k in this.paraObj) {
					if (this.paraObj[k] === undefined || this.paraObj[k] === '' || this.paraObj[k] === null) {
						delete this.paraObj[k]
					}
				}
				var response = await ala.httpGet('api/Auto/ToExcel', this.paraObj)
				if (response) {
					var exclePath = ala.host + response.value
					this.downloadUrl = {
						name: response.name,
						url: exclePath
					}
					this.downloadTab(exclePath)
					ala.toast('表格成功导出')
				}
				this.isLoading = false
			},
			downloadTab(val) {
				window.open(val, '_blank')
			}
		}
	}
</script>
<style lang="scss">
	@import "./export-table";
</style>